$card-image-height: 200px;

.life-record-card {
  display: grid;
  grid-template-rows: minmax($card-image-height, 26vh) 1fr;

  .el-carousel {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    .el-carousel__container {
      height: 100%;
    }

    .el-image {
      width: 100%;
      height: 100%;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .record-info {
    border-top: 1px solid var(--el-color-primary);
    padding: 1vh;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;

    .top-container, .bottom-container {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info-list {
        display: flex;
        align-items: center;
        gap: 8px;

        .el-rate {
          height: auto;
        }

        .info-item {
          display: flex;
          align-items: center;
          gap: 3px;

          .title {
            font-size: 1.2rem;
            font-weight: bold;
          }
        }

        .category-item {
          color: #0d9488;
        }

        .location-item {
          color: #0d9488;
        }

        .amount-item {
          font-size: 1.2rem;
          color: #CFB53B;
        }

        .fa-solid.fa-location-dot {
          color: #008000;
        }

        .fa-solid.fa-flag {
          color: #0000FF;
        }

        .fa-regular.fa-calendar-check {
          color: #FF0000;
        }
      }
    }

    .bottom-container {
      font-size: small;
      color: #9C9C9C;
    }
  }
}
